<template>
<div class="detail">
  <header class="detail-header">
    <div class="detail-header-title">
      <span style="width: 40px;height: 40px; background-color: #fff;"><img src="@/assets/user.svg"/></span>{{devices[currentId].patientName}}｜{{devices[currentId].gender === 1 ? '男' : '女'}}｜{{devices[currentId].age}}岁｜ {{ devices[currentId].bedId }} 床
    </div>
    <img
      class="header-right"
        src="@/assets/logo.png"
        alt=""
      >
  </header>
  <main class="detail-content">
    <div class="detail-content-left">
      <div class="chart-container">
        <div class="chart-container-title">ECG</div>
          <EcgChart 
            ref="ecgChartRef"
            height="4cm"
            :width="31"
            :deviceId="currentId"
            :loading="false"
            :showSplitLine="true"
          />
      </div>
      <div class="chart-container">
        <div class="chart-container-title">SpO2</div>
          <Spo2Chart 
            height="4cm"
            :width="31"
            :deviceId="currentId"
            :loading="false"
            :color="infoConfig.spo2.color"
          />
      </div>
      <div class="chart-container">
        <div class="chart-container-title">RESP</div>
          <RespChart 
            height="4cm"
            :width="31"
            :deviceId="currentId"
            :loading="false"
            :color="infoConfig.resp.color"
          />
      </div>
      
    </div>
    <div class="detail-content-right">
      <DetailInfoCard v-for="item of infoConfig" :key="item.title" :config="item" :deviceId="currentId" />
    </div>
  </main>
  <footer>
    <div @click="goHome" class="go-home">
      <img src="@/assets/home.svg"/>
      <div class="go-home-title">首页</div>
    </div>
    <div class="footer-right">
      <div>{{tutelageTime}}</div>
      <div class="footer-right-electric"><Electric :device-id="currentId"/></div>
      <div class="footer-right-lanya">
        <img :src="bluetoothUrl" />
      </div>
    </div>
  </footer>
</div>
</template>

<script setup lang="ts">
import DetailInfoCard from '@/components/detail/info-card/index.vue'
// import InfoChart from '@/components/detail/info-chart.vue'
import EcgChart from '@/components/ecg-chart.vue'
import Spo2Chart from '@/components/spo2-chart.vue'
import RespChart from '@/components/resp-chart.vue'
import Electric from '@/components/electric.vue'
import {useEquipmentInfoStore} from '@/stores/equipment-info-store'
import {
  getHistoryHr,
  getHistorySpo2,
  getHistoryResp,
  getHistoryNibp,
  getHistoryTemp,
} from '@/api/index'
import { useRoute, useRouter } from 'vue-router'
import { computed, onUnmounted, ref } from 'vue'
import Worker from '@/hooks/worker/tutelage-time-worker.js?worker';//
const infoConfig = {
  hr: {
    id: 'hr',
    color: 'rgb(42 189 137)',
    title: 'HR',
    unit: 'bpm',
    modalTitle: 'HR',
    historyApi: getHistoryHr,
    yAxis: {
      min: 40,
      max: 120
    },
    pieces: {
      gt: 60,
      lt: 100,
    }
  },
  spo2: {
    id: 'spo2',
    color: 'rgb(0 89 234)',
    title: 'SpO2',
    unit: '%',
    modalTitle: 'SPO2',
    historyApi: getHistorySpo2,
    yAxis: {
      min: 40,
      max: 120
    },
    pieces: {
      gt: 90,
      lt: 100,
    }
  },
  resp: {
    id: 'resp',
    color: 'rgb(251 195 90)',
    title: 'RESP',
    unit: '/min',
    modalTitle: 'RESP',
    historyApi: getHistoryResp,
    yAxis: {
      min: 8,
      max: 24
    },
    pieces: {
      gt: 12,
      lt: 20,
    }
  },
  nibp: {
    id: 'nibp',
    color: 'rgb(254 254 254)',
    title: 'NIBP',
    unit: 'mmhg',
    modalTitle: 'NIBP 数据列表',
    historyApi: getHistoryNibp
  },
  temp: {
    id: 'temp',
    color: 'rgb(82 242 243)',
    title: 'TEMP',
    unit: '°C',
    modalTitle: 'TEMP 数据列表',
    historyApi: getHistoryTemp
  }
}
const route = useRoute()
const currentId = route.query.id as string
const devices = JSON.parse(localStorage.getItem('devices')||'')

const tutelageTime = ref()
const worker = new Worker()
worker.postMessage({
  createTime: devices[currentId].createTime
}); 
worker.onmessage = e => {
  tutelageTime.value = e.data.tutelageTime
}
onUnmounted(() => {
  worker.postMessage({
    createTime: devices[currentId].createTime,
    stop: true
  }); 
  worker.terminate();
})
const store = useEquipmentInfoStore()
const bluetoothUrl = computed(() => {
  const config: Record<string, any> = {
    0: new URL('../assets/lanya.svg', import.meta.url).href,
    1: new URL('../assets/lanya-close.svg', import.meta.url).href,
    2: new URL('../assets/lanya-open.svg', import.meta.url).href,
  }
  return config[store.personValueData(currentId).bluetooth]
})
const router = useRouter()
const goHome = () => {
  router.push({path: '/home'})
}
</script>
<style lang="less" scoped>
.detail {
  display: flex;
  flex-direction: column;
}
.detail-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100px;
  padding: 8px 24px;
  border-bottom: 2px solid rgb(64 63 66);
  img {
    height: 60px;
  };
  .detail-header-title {
    color: #fff;
    font-size: 40px;
    span {
      width: 50px;
      height: 50px; 
      background-color: #fff;
      border-radius: 4px;
      margin-right: 8px;
    }
    img {
      height: 40px;
      vertical-align: middle;
    }
  }
}
.detail-content {
  height: calc(100vh - 204px);
  overflow: auto;
  display: flex;
  padding: 24px;
  .detail-content-left {
    width: 70%;
    margin-right: 16px;
    display: grid;
    .chart-container {
      padding-top: 16px;
      color: #fff;
      border-radius: 3px;
      background-color: rgb(31 32 37);
      display: flex;
      margin-bottom: 24px;
      align-items: center;
      .chart-container-title {
        width: 80px;
        padding: 16px 12px;
        text-align: right;
        font-size: 16px;
        align-self: start;
      }
      // .chart-container-content {
      //   flex: 1;
      // }
    }
  }
  .detail-content-right {
    flex: 1;
    display: grid;
    grid-gap: 16px 0;
  }

}
footer {
  height: 80px;
  display: flex;
  border-top: 1px solid rgb(64 63 66);
  margin-top: 24px;
  justify-content: space-between;
  align-items: center;
  color: #fff;
  padding: 0 24px;
  font-size: 30px;
  .go-home {
    cursor: pointer;
    
    .go-home-title {
      font-size: 14px;
      text-align: center;
    }
    img {
      height: 32px;
      vertical-align: text-bottom;
    }
  }

  .footer-right {
    display: flex;
    .footer-right-electric {
      margin-top: 12px;
    }
    .footer-right-electric,
    .footer-right-lanya {
      margin-left: 12px;
    }
    .footer-right-lanya img {
      vertical-align: inherit;
      height: 28px;
    }
  }
}
</style>
